<template>
  <view class="member-top">
    <view class="recharge-wrap">
      <!-- <view class="recharge-label">
        <text>今日充值</text>
      </view>
      <view class="recharge-value">
        <text>{{ total }}</text>
      </view>-->
      <PriceBox :price="total" label="今日充值(元)" />
    </view>
    <view class="statistics-wrap">
      <Statistics :data="statistics" />
    </view>
  </view>
</template>

<script>
import Statistics from "../../../../components/public/Statistics/index.vue";
import PriceBox from "../../../../components/public/PriceBox/index.vue";
import { mapState } from "vuex";
export default {
  components: {
    PriceBox,
    Statistics
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      home: state => state.member.home
    }),
    total() {
      return this.home.todayRecharge;
    },
    statistics() {
      return [
        {
          label: "新增会员",
          value: this.home.todayNewMember
        },
        {
          label: "累计会员",
          value: this.home.totalMember
        },
        {
          label: "充值总额",
          value: this.home.totalRecharge
        }
      ];
    }
  }
};
</script>

<style scoped lang="scss">
.member-top {
  padding: 0 30rpx;
  background: $themeColor;
  // overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;

  .recharge-wrap {
    color: #ffffff;
    text-align: center;
    .recharge-label {
      font-size: 28rpx;
    }
    .recharge-value {
      margin-top: 25rpx;
      font-size: 55rpx;
      font-weight: 600;
    }
  }

  .statistics-wrap {
    margin-top: 30rpx;
    margin-bottom: -40rpx;
  }
}
</style>
